<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="兑换记录" name="record_integral">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column
            label="头像"
            width="100">
            <template slot-scope="scope">
              <div>
                <img :src="scope.row.photo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="姓名/昵称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="phone"
            width="180"
            label="手机">
<!--            <template slot-scope="scope">-->
<!--              <div>{{scope.row.phone?scope.row.phone:scope.row.user_info.phone_number}}</div>-->
<!--            </template>-->
          </el-table-column>
          <el-table-column
            prop="position"
            label="职位">
<!--            <template slot-scope="scope">-->
<!--              <div>{{scope.row.user_info.position}}</div>-->
<!--            </template>-->
          </el-table-column>
          <el-table-column
            prop="integral"
            label="兑换积分">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="兑换金额">
          </el-table-column>
          <el-table-column
            prop="created_at"
            width="180"
            label="创建时间">
          </el-table-column>
        </el-table>
        <el-col :span="24" class="footer-bar">
          <div class="page-code">
            <el-pagination
              background
              :page-size="limit"
              layout="prev, pager, next"
              :total="totalPage"
              @current-change="getIntegralExchangeList"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "record_integral",
    data(){
      return{
        activeName: 'record_integral',
        tableData:[],
        totalPage: 0,
        limit: 10,
        page: 1,
      }
    },
    mounted(){
      this.getIntegralExchangeList();
    },
    methods:{
      pageChange(e) {
        //翻页
        this.page = e;
        this.getIntegralExchangeList();
      },
      handleClick(tab, event){
        this.activeName = tab.name;
      },
      //获取积分兑换记录
      async getIntegralExchangeList(){
        let params = {
          limit: this.limit,
          page: this.page
        }
        const res = await this.$api.getIntegralExchangeList(params);
        if (res.data.level == 'success'){
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }
</style>
